<template>
  <refresh @refreshOver="refreshOver" @getMore="getMore" ref="refresh">
    <waterfall :dataList="dataList">
      <template v-slot:waterfall-info="props">
        <div class="info_box">
          <div class="title">
            {{ props.value.name }}
          </div>
          <div class="control">
            <div class="left">
              <img class="head" src="@/assets/logo.jpg" alt="" />
              <span>反转</span>
            </div>
            <div class="right" @click="setLike(props.value)">
              <img
                v-if="props.value.isLike"
                src="@/assets/images/heart.png"
                alt=""
              />
              <img v-else src="@/assets/images/heart-gray.png" alt="" />
              <span>500</span>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </refresh>
</template>
<script lang="ts">
interface ArrayType {
  name: string;
  imgurl: string;
}
interface global {
  dataList: ArrayType[];
}
import { defineComponent, ref, reactive, toRefs, provide } from "vue";
import refresh from "@/components/refresh.vue";
import waterfall from "@/components/waterfall.vue";
export default defineComponent({
  components: {
    refresh,
    waterfall,
  },
  setup() {
    const refresh = ref();
    const dataAll: global = reactive({
      dataList: [
        { name: "one", imgurl: require("@/assets/images/01.png") },
        { name: "two", imgurl: require("@/assets/images/02.png") },
        { name: "three", imgurl: require("@/assets/images/03.png") },
        { name: "four", imgurl: require("@/assets/images/04.png") },
        { name: "one", imgurl: require("@/assets/images/01.png") },
        { name: "two", imgurl: require("@/assets/images/02.png") },
        { name: "three", imgurl: require("@/assets/images/03.png") },
        { name: "four", imgurl: require("@/assets/images/04.png") },
      ],
    });
    /**
     * 模拟获取更多数据
     */
    const getMore = () => {
      if (dataAll.dataList.length > 20) {
        // 提示没有更多了
        refresh.value.notMore();
        return;
      }
      const arr: ArrayType[] = [
        { name: "one", imgurl: require("@/assets/images/01.png") },
        { name: "two", imgurl: require("@/assets/images/02.png") },
        { name: "three", imgurl: require("@/assets/images/03.png") },
        { name: "four", imgurl: require("@/assets/images/04.png") },
        { name: "one", imgurl: require("@/assets/images/01.png") },
        { name: "two", imgurl: require("@/assets/images/02.png") },
        { name: "three", imgurl: require("@/assets/images/03.png") },
        { name: "four", imgurl: require("@/assets/images/04.png") },
      ];
      dataAll.dataList = dataAll.dataList.concat(arr);
    };
    /**
     * 下拉刷新 模拟请求数据
     */
    const refreshOver = () => {
      const arr: ArrayType[] = [
        { name: "one", imgurl: require("@/assets/images/01.png") },
        { name: "two", imgurl: require("@/assets/images/02.png") },
        { name: "three", imgurl: require("@/assets/images/03.png") },
        { name: "four", imgurl: require("@/assets/images/04.png") },
        { name: "one", imgurl: require("@/assets/images/01.png") },
        { name: "two", imgurl: require("@/assets/images/02.png") },
        { name: "three", imgurl: require("@/assets/images/03.png") },
        { name: "four", imgurl: require("@/assets/images/04.png") },
      ];
      dataAll.dataList = arr
      setTimeout(() => {
        refresh.value.refreshOver();
      }, 800);
    };
    return {
      ...toRefs(dataAll),
      refresh,
      getMore,
      refreshOver,
    };
  },
  methods: {
    /**
     * 点赞
     */
    setLike(value: any) {
      value.isLike = value.isLike ? false : true;
    },
  },
});
</script>
<style lang="scss" scoped>
.info_box {
  .title {
    padding: 0 0.266667rem;
    font-size: 0.56rem;
    text-align: left;
    margin-top: 0.133333rem;
    overflow: hidden;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
.control {
  margin-top: 0.266667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.266667rem;
  padding-bottom: 0.2rem;
  .left,
  .right {
    display: flex;
    align-items: center;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      margin-right: 0.066667rem;
    }
    span {
      font-size: 0.32rem;
      font-weight: 400;
      text-align: left;
      color: #26272a;
      line-height: 0.626667rem;
      letter-spacing: 1px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .left {
    width: 70%;
  }
  .right {
    img {
      width: 0.533333rem;
      height: 0.533333rem;
      display: inline-block;
    }
    span {
      margin-left: 0.08rem;
      font-size: 0.373333rem;
      font-weight: 400;
      text-align: left;
      color: #747678;
      line-height: 0.466667rem;
      letter-spacing: 1px;
    }
  }
}
</style>
